import { Suspense } from "react";
import { notFound } from "next/navigation";
import { getLayoutConfiguration } from "@/app/actions/layout-configurations";
import { LayoutConfigurationDetail } from "@/app/components/layout-configurations/LayoutConfigurationDetail";
import { Skeleton } from "@/components/ui/skeleton";

interface PageProps {
  params: {
    id: string;
  };
}

export default async function LayoutConfigurationDetailPage({ params }: PageProps) {
  const p = await params;
  const id = parseInt(p.id);
  
  if (isNaN(id)) {
    notFound();
  }

  const result = await getLayoutConfiguration(id);
  
  if (!result.success || !result.data) {
    notFound();
  }

  const configuration = result.data;

  return (
    <div className="container mx-auto py-8 px-4">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">{configuration.name}</h1>
        <p className="text-muted-foreground">
          Created: {new Date(configuration.createdAt).toLocaleDateString()}
        </p>
      </div>

      <Suspense fallback={<LayoutConfigurationDetailSkeleton />}>
        <LayoutConfigurationDetail configuration={configuration} />
      </Suspense>
    </div>
  );
}

function LayoutConfigurationDetailSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-8 w-64" />
      <Skeleton className="h-4 w-32" />
      <Skeleton className="h-32 w-full" />
    </div>
  );
}